<template>
 <div class="container">
   <form style="width: 500px;">
     <h2>{{title}}</h2>
     <br>
     <span>用户名：</span><input type="text" v-model="userInfo.userName" class="form-control" placeholder="Username">
     <br>
     <span>密码：</span><input type="password" v-model="userInfo.userPwd" class="form-control" placeholder="password">
     <br>
      <button type="button" class="btn btn-primary" @click="login">登录</button>
      <button type="button" class="btn btn-primary" @click="loginGet">Get登录</button>
      <button type="button" class="btn btn-primary" @click="loginPost">Post登录</button>
      <!-- <router-link :to="{}"></router-link> -->
   </form>
 </div>

</template>

<script>
  //引入工具对象myUtil.js  就可以调用其对象myUtil.url和方法myUtil.add
  import myUtil from '../../util/myUtil'
  //引入vue的axios模块
  import axios from 'axios'
  //如果是post请求 需要引入qs模块、
  import Qs from 'qs'
  //引入工具对象myUtil2.js
  // import {add,url} from "../../util/myUtil2"
 //导入模块
 export default {
    name:"login", //该模块组件的名称 data:{}
    data(){
      return {
         userInfo:{ //定义用户对象
            userName:"",
            userPwd:""
         },
         title:"登录页面"
      }
    },
    methods:{ //定义函数 methods:{}
      login(){ //登录方法
          var mythis = this;
          //演示调用工具对象myUtil.js的方法
          // myUtil.add();
          //演示调用工具对象myUtil2.js的方法
          // add();
         $.ajax({
           //原始url
           // url:"http://localhost:8080/user-info/login",
           //调用myUtil.js的myUtil对象的url属性值
           url:myUtil.url+"/user-info/login",
           //调用myUtil2.js定义的url属性值
           // url:url+"/user-info/login",
            type:"get",
            data:mythis.userInfo,
            success:function(data){
              console.log(data);
              if(data.info=="登录成功"){
                //第一种转发 页面跳转
                // mythis.$router.replace("/userList");
                //第二种重定向 页面跳转
                // mythis.$router.push({name:"userList"});
                mythis.$router.replace({name:"userList",query:{"userName":mythis.userInfo.userName}});
              }
            }
         })
      },
      loginGet(){ //get登录方法
          var mythis = this;
          axios.get(
                myUtil.url+"/user-info/login",{params:mythis.userInfo}
                ).then(function(rs){
                  console.log(rs.data.info);
                  // alert(rs.data.info);
                  if(rs.data.info=="登录成功"){
                    //第一种转发 页面跳转
                    // mythis.$router.replace("/userList");
                    //第二种重定向 页面跳转
                    // mythis.$router.push({name:"userList"});
                    mythis.$router.replace({name:"userList",query:{"userName":mythis.userInfo.userName}});
                  }
                })
      },
      loginPost(){ //post登录方法 post方式需要引入Qs模块
          var mythis = this;
          axios({
            headers:{
             'Content-Type':"application/x-www-form-urlencoded"
            },
            method:"post",
            url:myUtil.url+"/user-info/loginPost",
            data:Qs.stringify(mythis.userInfo)//
          }).then(function(rs){
            console.log(rs.data.info);
            // alert(rs.data.info);
            if(rs.data.info=="登录成功"){
              //第一种转发 页面跳转
              // mythis.$router.replace("/userList");
              //第二种重定向 页面跳转
              // mythis.$router.push({name:"userList"});
              mythis.$router.replace({name:"userList",query:{"userName":mythis.userInfo.userName}});
            }
          })
      }
    },
    mounted(){//挂载函数，类似于前端的文档加载事件  onload()
       // alert("挂载函数，类似于前端的文档加载事件  onload()")
    }
 }
</script>

<style>
</style>
